<template>
  <div>
    <Row :gutter="10">
      <Col>
      <Card>
        <Row style="margin-top: 5px;margin-bottom: 10px">
          <Button type="primary"
                  @click="addAuth"
                  style="font-size: 14px;float: right">添加权限</Button>
        </Row>
        <Row class="margin-top-20 table_pattern">
          <Table style="width: calc(100vw - 256px - 36px - 32px)"
                 :loading="loading"
                 :columns="columns"
                 :data="list"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page :total="pagenation.totalPage"
                :page-size="pagenation.perPage"
                :current="pagenation.currentPage"
                show-elevator
                show-total
                @on-change="change"></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <Modal v-model="manage_create"
           title="添加权限"
           width="40%"
           class="public_modal_header edit_modal"
           :mask-closable="false">
      <Form :model="formValidate"
            ref="formValidate"
            :label-width="80"
            style="width: 85%;margin: 0 auto;padding: 25px 0 10px;">
        <FormItem label="权限名称"
                  prop="name">
          <Input v-model="formValidate.name"
                 placeholder="请输入权限名称"></Input>
        </FormItem>
        <FormItem label="权限描述"
                  prop="description">
          <Input v-model="formValidate.description"
                 type="textarea"
                 :rows="4"
                 placeholder="请输入权限描述"></Input>
        </FormItem>
        <FormItem label="优先级"
                  prop="sort">
          <Input v-model="formValidate.sort"
                 placeholder="请输入优先级"></Input>
        </FormItem>
      </Form>
      <div class="btns">
        <Button :loading="saving"
                type="primary"
                @click="handleSubmit('formValidate')"
                style='margin-left:20px'>提交</Button>
      </div>
    </Modal>
    <Modal v-model="show_btn_auth"
           title="按钮权限列表"
           width="50%"
           class="public_modal_header edit_modal">
      <Row style="margin-top: 5px;margin-bottom: 10px">
        <Button type="primary"
                @click="addBtnAuth"
                style="font-size: 14px;margin-left: 10px">添加权限</Button>
      </Row>
      <Row class="margin-top-20 table_pattern">
        <Table :columns="columns"
               :data="btn_auth_list"></Table>
      </Row>

    </Modal>
  </div>
</template>
<script>
import { authList, createAuth, deleteAuth, pageBtnPermission } from '@/api/main'
export default {
  data () {
    return {
      pagenation: {},
      columns: [
        {
          key: 'name',
          title: '权限名称',
          render: (h, params) => {
            return h('strong', params.row.name)
          },
        },
        {
          key: 'desc',
          title: '权限描述',
          render: (h, params) => {
            return h('strong', params.row.description)
          },
        },
        {
          key: 'sort',
          title: '优先级',
          render: (h, params) => {
            return h('strong', params.row.sort)
          },
        },
        {
          key: 'created_at',
          title: '创建时间',
          render: (h, params) => {
            return h('strong', params.row.created_at)
          },
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '您确定要删除该权限吗?',
                    transfer: true,
                  },
                  on: {
                    'on-ok': () => {
                      deleteAuth(params.row).then(res => {
                        if (res.code === 0) {
                          let _this = this
                          _this.$Message.success('删除成功')
                          if (params.row.permission_type == 1) {
                            _this.init()
                          } else {
                            _this.btnPermission(_this.page_auth)
                          }
                          _this.init()
                        } else {
                          this.$Message.error(res.text)
                        }
                      })
                    },
                  },
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        margin: '0 5px 0 0',
                        border: 0,
                        background: 'transparent',
                        fontSize: '14px',
                        color: '#377EEF'
                      },
                      props: {
                        size: 'small'
                      },
                    },
                    '删除',
                  ),
                ],
              ),
              h(
                'Button',
                {
                  props: {
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                    display: params.row.permission_type == 1 ? 'inline-block' : 'none'
                  },
                  on: {
                    click: () => {
                      this.btnPermission(params.row)
                    },
                  },
                },
                '按钮权限',
              ),
            ])
          },
        },
      ],
      list: [],
      btn_auth_list: [],
      page_auth: {},
      loading: true,
      saving: false,
      manage_create: false,
      show_btn_auth: false,
      item_id: 0,
      formValidate: {
        name: '',
        description: '',
        sort: 1,
        page: 0,
        parent_name: '',
        permission_type: 1
      },
    }
  },
  components: {
  },
  methods: {
    change: function (page) {
      this.loading = true
      this.formValidate.page = page - 1
      this.init(page - 1)
    },
    addAuth: function () {
      this.handleReset('formValidate')
      this.formValidate.parent_name = ''
      this.formValidate.permission_type = 1
      this.manage_create = true
    },
    addBtnAuth: function () {
      this.formValidate.parent_name = this.page_auth.name
      this.formValidate.permission_type = 2
      this.manage_create = true
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    showManageForm (obj) {
      this.formValidate = obj
    },
    search: function () {
      this.formValidate.page = 0
      this.init()
    },
    handleSubmit () {
      let _this = this
      if (_this.formValidate.name == '') {
        this.$Message.error("请填写权限名称"); return false;
      }
      if (_this.formValidate.description == '') {
        this.$Message.error("请填写权限描述"); return false;
      }
      createAuth(this.formValidate).then(res => {
        if (res.code == 0) {
          //console.log(res.data);return false;
          _this.$Message.success('添加成功')
          _this.saving = false
          _this.manage_create = false
          if (this.formValidate.permission_type == 1) {
            _this.init()
          } else {
            _this.btnPermission(this.page_auth)
          }
        } else {
          _this.$Message.error(res.text)
        }
        console.log(res)
      })
    },
    init () {
      let obj = {}
      obj.page = this.formValidate.page
      let _this = this
      authList(obj).then(res => {
        if (res.code == 0) {
          _this.list = res.data
          _this.loading = false
          _this.pagenation.currentPage = parseInt(res.currentPage) + 1
          _this.pagenation.totalPage = parseInt(res.totalPage)
          _this.pagenation.perPage = parseInt(res.perPage)
        }
      })
    },
    btnPermission (item) {
      let _this = this
      _this.page_auth = item
      let obj = {}
      obj.parent_name = item.name
      pageBtnPermission(obj).then(res => {
        if (res.code == 0) {
          _this.btn_auth_list = res.data
          _this.show_btn_auth = true
        }
      })
    }
  },
  mounted () {
    this.init(0)
  },
}
</script>
